<template>
  <div class="tender-assistant" :style="position" ref="assistantContainer" @mousedown="dragStart">
    <!-- Collapsed View -->
    <div v-if="!isExpanded" class="collapsed-view" @click.stop="toggleExpand">
      <span class="title">标书制作中</span>
      <div class="progress-indicator">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
        <span class="progress-text">制作中: {{ activeTenders.length }} 个</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </div>
    </div>

    <!-- Expanded View -->
    <div v-else class="expanded-view" @click.stop>
      <div class="header">
        <span class="header-title">正在制作的标书</span>
        <svg @click="toggleExpand" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="close-icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </div>
      <div class="tender-list">
        <div v-for="tender in activeTenders" :key="tender.id" class="tender-item">
          <p class="tender-title">{{ tender.title }}</p>
          <button class="action-button" @click="goToTender(tender.id)">进入对话</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TenderProgressAssistant',
  data() {
    return {
      isExpanded: false,
      activeTenders: [
        { id: 1, title: '宁夏宝廷新材料科技有限公司高端新材料项目...' },
        { id: 2, title: '国家电力投资集团有限公司物资电商化采购...' },
        { id: 3, title: '浙江山鹰77万吨项目自干式变压器采购项目' },
      ],
      position: {
        right: '20px',
        bottom: '80px',
      },
      dragging: false,
      dragStartPos: { x: 0, y: 0 },
      elStartPos: { x: 0, y: 0 },
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;

      // If we just expanded the component, check its position
      if (this.isExpanded) {
        this.$nextTick(() => {
          const container = this.$refs.assistantContainer;
          if (!container) return;

          const rect = container.getBoundingClientRect();
          const windowHeight = window.innerHeight;

          // Check if the bottom edge is outside the viewport
          if (rect.bottom > windowHeight) {
            const buffer = 20; // Keep a 20px margin from the bottom edge
            const newTop = windowHeight - rect.height - buffer;

            // Switch to top/left positioning to move the component up
            this.position = {
              top: `${newTop}px`,
              left: `${rect.left}px`,
            };
          }
        });
      }
    },
    goToTender(tenderId) {
      // Assuming you have a route named 'AIChat' that can take a parameter
      this.$router.push({ path: `/aichat` });
      console.log(`Navigating to tender ${tenderId}`);
    },
    dragStart(event) {
      // Prevent dragging when clicking on interactive elements inside
      if (event.target.closest('.action-button, .close-icon, .progress-indicator')) {
        return;
      }

      const container = this.$refs.assistantContainer;
      const rect = container.getBoundingClientRect();

      // Switch to top/left positioning for smooth dragging
      this.position = {
        top: `${rect.top}px`,
        left: `${rect.left}px`,
      };

      this.dragging = true;
      this.dragStartPos = { x: event.clientX, y: event.clientY };
      this.elStartPos = { x: rect.left, y: rect.top }; // Use values from getBoundingClientRect
      
      document.addEventListener('mousemove', this.dragMove);
      document.addEventListener('mouseup', this.dragEnd);
    },
    dragMove(event) {
      if (!this.dragging) return;
      const deltaX = event.clientX - this.dragStartPos.x;
      const deltaY = event.clientY - this.dragStartPos.y;
      this.position.top = `${this.elStartPos.y + deltaY}px`;
      this.position.left = `${this.elStartPos.x + deltaX}px`;
    },
    dragEnd() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.dragMove);
      document.removeEventListener('mouseup', this.dragEnd);
    },
  },
};
</script>

<style scoped>
.tender-assistant {
  position: fixed;
  z-index: 9999;
  font-family: 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  cursor: grab;
}

.tender-assistant:active {
    cursor: grabbing;
}

/* Collapsed View */
.collapsed-view {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f0f7ff;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1.5px solid #a8d8ff;
  box-shadow: 0 4px 20px rgba(0, 119, 255, 0.15);
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.collapsed-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 119, 255, 0.2);
}

.collapsed-view .title {
  font-weight: bold;
  font-size: 15px;
}

.collapsed-view .progress-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #007bff;
  font-weight: 500;
  font-size: 14px;
}

.progress-indicator .feather {
    stroke-width: 2.5;
}

/* Expanded View */
.expanded-view {
  width: 350px;
  background-color: #FFFFFF;
  border-radius: 20px;
  border: 1.5px solid #cce5ff;
  box-shadow: 0 10px 30px rgba(0, 119, 255, 0.15);
  padding: 16px 20px;
  cursor: default;
}

.expanded-view .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header .header-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.header .close-icon {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.header .close-icon:hover {
    transform: rotate(90deg);
}

.tender-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tender-list .tender-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 10px;
}

.tender-item .tender-title {
  font-weight: 500;
  color: #2c3e50;
  margin: 0;
  font-size: 14px;
  flex: 1;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-button {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.action-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

</style> 